<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>

    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../bower_components/Sortable/Sortable.min.js"></script>

    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-icons/bootstrap-icons.css" rel="stylesheet">

<!--    <script src="../dist/bs-form-builder.min.all.js"></script>-->

    <script src="../src/bs-form-builder-components.js"></script>
    <script src="../src/bs-form-builder.js"></script>
    <link href="../src/bs-form-builder.css" rel="stylesheet">

</head>

<body>
<div class="container-fluid">
    <form action="" class="jp-form">
        <div class="bs-form-builder-header">表单设计</div>
        <div id="builder"></div>
    </form>
</div>

<script>
    // var datas = [{"id":"62cbdbad88","tag":"grid","label":"栅格布局","name":"grid_1","grid":2,"index":1,"children":{"0":[{"id":"7c164d0e18","tag":"input","label":"输入框","name":"input_3","parentDataId":"8296f944ef","parentDataIndex":"0","index":0}],"1":[{"id":"8d595619a8","tag":"grid","label":"栅格布局","name":"grid_4","grid":2,"parentDataId":"8296f944ef","parentDataIndex":"1","index":0,"children":{"0":[{"id":"11d9e667d9","tag":"input","label":"输入框","name":"input_5","parentDataId":"c469c1bf28","parentDataIndex":"0","index":0},{"id":"44cb995b02","tag":"input","label":"输入框","name":"input_5","parentDataId":"c469c1bf28","parentDataIndex":"0","index":1}],"1":[{"id":"3f6772809c","tag":"textarea","label":"多行输入框","name":"textarea_6","rows":5,"parentDataId":"c469c1bf28","parentDataIndex":"1","index":0}]}}]}},{"id":"657634a8df","tag":"textarea","label":"多行输入框","name":"textarea_2","rows":5,"index":0}]
    // $('#builder').bsFormBuilder({datas});

    // var datas = [{"id":"62cbdbad88","tag":"grid","label":"栅格布局","name":"grid_1","grid":2,"index":1,"children":{"0":[{"id":"7c164d0e18","tag":"input","label":"输入框","name":"input_3","parentDataId":"8296f944ef","parentDataIndex":"0","index":0}],"1":[{"id":"8d595619a8","tag":"grid","label":"栅格布局","name":"grid_4","grid":2,"parentDataId":"8296f944ef","parentDataIndex":"1","index":0,"children":{"0":[{"id":"11d9e667d9","tag":"input","label":"输入框","name":"input_5","parentDataId":"c469c1bf28","parentDataIndex":"0","index":0},{"id":"44cb995b02","tag":"input","label":"输入框","name":"input_5","parentDataId":"c469c1bf28","parentDataIndex":"0","index":1}],"1":[{"id":"3f6772809c","tag":"textarea","label":"多行输入框","name":"textarea_6","rows":5,"parentDataId":"c469c1bf28","parentDataIndex":"1","index":0}]}}]}},{"id":"657634a8df","tag":"textarea","label":"多行输入框","name":"textarea_2","rows":5,"index":0}]
    // $('#builder').bsFormBuilder({
    //     mode:"view",
    //     datas
    // });

    $('#builder').bsFormBuilder();
</script>
</body>

</html>
